<template>
  <view class="sales-stats">
    <view class="header1"  :style="{zIndex: headIndex}">
      <view class="store-name">{{shopName}}</view>
      <up-dropdown @open="handleOpen" @close="handleClose">
        <up-dropdown-item
          v-model="timeValue"
          :title="timeTitle"
          :options="timeOptions"
          @change="handleChange"
         
        ></up-dropdown-item>
      </up-dropdown>
    </view>

    <view class="stats-section">
      <view class="section-title">数据统计</view>

      <view class="stats-grid">
        <view class="stats-card">
          <text class="label">销售额</text>
          <text class="value">{{ stats.salesAmount?`¥${stats.salesAmount}`:'-' }}</text>
        </view>

        <view class="stats-card">
          <text class="label">客流量</text>
          <text class="value">{{ stats.customerFlow?stats.customerFlow:'-' }}</text>
        </view>
      </view>

      <view class="stats-row">
        <view class="stat-item">
          <text class="label">成交单数</text>
          <text class="value">{{ stats.orderCount?`¥${stats.orderCount}`:'' }}</text>
        </view>
        <view class="stat-item">
          <text class="label">成交件数</text>
          <text class="value">{{ stats.productCount?stats.productCount:'-' }}</text>
        </view>
        <view class="stat-item">
          <text class="label">会员单数占比</text>
          <text class="value">{{ stats.memberOrderRatio?stats.memberOrderRatio:'-' }}</text>
        </view>
      </view>

      <view class="stats-row">
        <view class="stat-item">
          <text class="label">平均客单价</text>
          <text class="value">{{ stats.avgCustomerPrice?`¥${stats.avgCustomerPrice}`:'-' }}</text>
        </view>
        <view class="stat-item">
          <text class="label">平均客单件</text>
          <text class="value">{{ stats.avgCustomerProduct?stats.avgCustomerProduct:'-' }}</text>
        </view>
        <view class="stat-item">
          <text class="label">成交率</text>
          <text class="value">{{ stats.turnoverRate?stats.turnoverRate:'-' }}</text>
        </view>
      </view>
    </view>

    <view class="table-section">
      <scroll-view scroll-x class="table-scroll">
        <view class="table">
          <view class="table-header">
            <view class="th">排行</view>
            <view class="th">产品款号</view>
            <view class="th">产品名称</view>
            <view class="th">销售额</view>
            <view class="th">成交单数</view>
            <view class="th">成交件数</view>
          </view>
          <view class="table-body" v-if="productList.length > 0">
            <view class="table-row" v-for="(item, index) in productList" :key="index">
              <view class="td">{{ index + 1 }}</view>
              <view class="td">{{ item.productCode }}</view>
              <view class="td">{{ item.name }}</view>
              <view class="td">¥{{ item.salesAmount }}</view>
              <view class="td">{{ item.orderCount }}</view>
              <view class="td">{{ item.productCount }}</view>
            </view>
          </view>
          <view v-else class="table-body">
            <Empty :emptyInfo="emptyInfo" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { shopApi } from "@/api";
import { IMG_URL2 } from "@/config";
import Empty from "@/components/empty.vue";
import { getStorage } from "@/utils/storage";
let shopName =ref('')
let headIndex = ref(0);
const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无统计数据~"
});
const timeValue = ref(-1);
const timeTitle = ref("全部");
const timeOptions = ref([
  { label: "全部", value: -1 },
  { label: "今日", value: 0 },
  { label: "昨日", value: 1 },
  { label: "本周", value: 2 },
  { label: "上周", value: 4 },
  { label: "本月", value: 5 },
  { label: "上月", value: 6 },
  { label: "年累计", value: 7 },
  { label: "去年", value: 8 }
]);

let dateType = ref("");

const stats = ref({
  salesAmount: "",
  orderCount: "",
  customerFlow: "",
  itemCount: "",
  memberRate: "",
  successRate: "",
  avgOrderAmount: "",
  avgOrderItems: ""
});

const productList = ref([]);
const handleChange = (value) => {

  dateType.value = value;
  timeTitle.value = timeOptions.value.find((item) => item.value === value).label;
  getData();
};


const handleOpen = () => {
  console.log("open");
  headIndex.value = 999
}

const handleClose = () => {
  headIndex.value = 0
}
const getData = () => {
  let params = {
    dateType: dateType.value
  };
  shopApi.SHOPSHOPDATASTATISTICS(params).then((res) => {
    if (res.code == 200) {
      stats.value = res.result;
      productList.value = res.result.productList;
      console.log(productList.value,'productList.value');
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success"
      });
    }
  });
};
onShow(() => {
  shopName.value = getStorage("shopName");
  getData();
});
</script>

<style lang="scss" scoped>
.sales-stats {
  min-height: 100vh;
  background-color: #fff;
  .header1 {
    border-bottom: 2rpx solid #eee;
    position: sticky;
    top: 0;
    left: 0;
    .store-name {
      position: absolute;
      top: 12rpx;
      left: 24rpx;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color:rgba(0, 0, 0, 0.6);
    }
  }

  .stats-section {
    margin: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    border: 1rpx solid rgba(238, 238, 238, 1);
    border-radius: 16rpx;
    .section-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .stats-grid {
      display: flex;
      gap: 20rpx;
      margin-bottom: 20rpx;
      align-items: center;
      justify-content: space-around;
      .stats-card {
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 12rpx;

        .label {
          font-size: 24rpx;
          color: #666;
          display: block;
          margin-bottom: 10rpx;
        }

        .value {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
          display: block;
          margin-bottom: 10rpx;
        }

        .sub-label {
          font-size: 24rpx;
          color: #666;
          display: block;
          margin-bottom: 6rpx;
        }

        .sub-value {
          font-size: 28rpx;
          color: #333;
          display: block;
        }
      }
    }

    .stats-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;
      .stat-item {
        flex: 1;
        text-align: center;

        .label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 10rpx;
          display: block;
        }

        .value {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          display: block;
        }
      }
    }
  }

  .table-section {
    background-color: #fff;
    z-index: -1;
    .table-scroll {
      width: 100%;
      // white-space: nowrap;
    }

    .table {
      min-width: 750rpx;

      .table-header {
        display: flex;
        .th {
          flex: 1;
          padding: 20rpx;
          box-sizing: border-box;
          font-size: 28rpx;
          color: #666;
          text-align: center;
          min-width: 160rpx;
          background: rgba(243, 243, 243, 1);
          &:first-child {
            min-width: 100rpx;
          }
        }
      }

      .table-body {
        .table-row {
          display: flex;
          border-bottom: 2rpx solid #f5f5f5;

          &:last-child {
            border-bottom: none;
          }

          .td {
            flex: 1;
            padding: 20rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            color: #333;
            text-align: center;
            min-width: 160rpx;

            &:first-child {
              min-width: 100rpx;
            }
          }
        }
      }
    }
  }
}
</style>
